import {DrawerForm, ProFormDatePicker, ProFormDigit, ProFormSelect, ProFormText} from '@ant-design/pro-components';
import {Form} from 'antd';
import React from 'react';

interface VehicleFormProps {
  trigger?: React.ReactNode;
  initialValues?: API.IVehicle;
  onFinish: (values: API.IVehicle) => Promise<boolean>;
  onOpenChange?: (open: boolean) => void;
  title?: string;
}

const VehicleForm: React.FC<VehicleFormProps> = ({
                                                   trigger,
                                                   initialValues,
                                                   onFinish,
                                                   onOpenChange,
                                                   title
                                                 }) => {
  const [form] = Form.useForm<API.IVehicle>();

  return (
    <DrawerForm<API.IVehicle>
      form={form}
      title={title || (initialValues ? '编辑车辆信息' : '新增车辆')}
      width={800}
      trigger={trigger as any}
      initialValues={initialValues}
      onFinish={onFinish}
      onOpenChange={(open) => {
        if (!open) {
          form.resetFields();
        }
        onOpenChange?.(open);
      }}
      grid
      rowProps={{
        gutter: 16,
      }}
      drawerProps={{
        destroyOnClose: true,
        maskClosable: false,
      }}
    >
      {/* 第一行：车牌号 + 车辆类型 */}
      <ProFormText
        name="plateNumber"
        label="车牌号码"
        colProps={{span: 12}}
        rules={[{required: true, message: '请输入车牌号码'}]}
        placeholder="如：粤A12345"
      />
      <ProFormSelect
        name="vehicleType"
        label="车辆类型"
        colProps={{span: 12}}
        rules={[{required: true, message: '请选择车辆类型'}]}
        options={[
          {label: '小型汽车', value: '1'},
          {label: '中型客车', value: '2'},
          {label: '大型货车', value: '3'},
        ]}
      />

      <ProFormText
        name="brand"
        label="品牌"
        colProps={{span: 12}}
        rules={[{required: true, message: '请输入品牌'}]}
        placeholder="如：大众、丰田"
      />
      <ProFormText
        name="model"
        label="型号"
        colProps={{span: 12}}
        rules={[{required: true, message: '请输入型号'}]}
        placeholder="如：捷达、卡罗拉"
      />
      <ProFormText
        name="color"
        label="颜色"
        colProps={{span: 12}}
        rules={[{required: true, message: '请输入颜色'}]}
        placeholder="如：白色、黑色"
      />

      {/* 第三行：生产日期 + 购买日期 */}
      <ProFormDatePicker
        name="productionDate"
        label="生产日期"
        colProps={{span: 12}}
        rules={[{required: true, message: '请选择生产日期'}]}
        fieldProps={{
          format: 'YYYY-MM-DD',
          style: {width: '100%'},
        }}
      />
      <ProFormDatePicker
        name="purchaseDate"
        label="购买日期"
        colProps={{span: 12}}
        rules={[{required: true, message: '请选择购买日期'}]}
        fieldProps={{
          format: 'YYYY-MM-DD',
          style: {width: '100%'},
        }}
      />

      {/* 第五行：变速箱类型 + 燃油类型 */}
      <ProFormSelect
        name="transmissionType"
        label="变速箱类型"
        colProps={{span: 12}}
        rules={[{required: true, message: '请选择变速箱类型'}]}
        options={[
          {label: '手动', value: '1'},
          {label: '自动', value: '2'},
        ]}
      />
      <ProFormSelect
        name="fuelType"
        label="燃油类型"
        colProps={{span: 12}}
        rules={[{required: true, message: '请选择燃油类型'}]}
        options={[
          {label: '汽油', value: '1'},
          {label: '柴油', value: '2'},
          {label: '电动', value: '3'},
          {label: '混合动力', value: '4'},
        ]}
      />

      {/* 第六行：座位数 + 当前里程 */}
      <ProFormDigit
        name="seats"
        label="座位数"
        colProps={{span: 12}}
        min={1}
        max={50}
        rules={[{required: true, message: '请输入座位数'}]}
      />
      <ProFormDigit
        name="mileage"
        label="当前里程(公里)"
        colProps={{span: 12}}
        min={0}
        rules={[{required: true, message: '请输入当前里程'}]}
        fieldProps={{
          addonAfter: '公里',
        }}
      />

      {/* 第七行：状态 + GPS设备ID */}
      <ProFormSelect
        name="status"
        label="状态"
        colProps={{span: 12}}
        rules={[{required: true, message: '请选择状态'}]}
        options={[
          {label: '可用', value: "1"},
          {label: '维修中', value: "2"},
          {label: '已报废', value: "3"},
          {label: '已出售', value: "4"},
        ]}
      />
      <ProFormText
        name="engineNumber"
        label="发动机号"
        colProps={{span: 12}}
        rules={[{required: true, message: '请输入发动机号'}]}
      />
      <ProFormText
        name="frameNumber"
        label="车架号"
        colProps={{span: 12}}
        rules={[{required: true, message: '请输入车架号'}]}
      />
      <ProFormText
        name="gpsDeviceId"
        label="GPS设备ID"
        colProps={{span: 12}}
        placeholder="请输入GPS设备编号"
      />

      {/* 第八行：保险单号 + 保险到期日 */}
      <ProFormText
        name="insuranceNumber"
        label="保险单号"
        colProps={{span: 12}}
        placeholder="请输入保险单号"
      />
      <ProFormDatePicker
        name="insuranceExpire"
        label="保险到期日"
        colProps={{span: 12}}
        fieldProps={{
          format: 'YYYY-MM-DD',
          style: {width: '100%'},
        }}
      />

      {/* 第九行：年检日期 + 下次年检日期 */}
      <ProFormDatePicker
        name="annualInspectionDate"
        label="年检日期"
        colProps={{span: 12}}
        fieldProps={{
          format: 'YYYY-MM-DD',
          style: {width: '100%'},
        }}
      />
      <ProFormDatePicker
        name="nextInspectionDate"
        label="下次年检日期"
        colProps={{span: 12}}
        fieldProps={{
          format: 'YYYY-MM-DD',
          style: {width: '100%'},
        }}
      />
    </DrawerForm>
  );
};

export default VehicleForm;
